<!--
 * @name score
 * @description 组件描述
 * @author idouya
 * @email elegentfrog@163.com
 * @date 2025-07-03
 -->

<template>
  <div class="p-score common-bg common-layout">
    <page-title
      :discipline="gameInfo.discipline"
      :event="gameInfo.event"
      :match="gameInfo.match"
      :type="gameInfo.type"
      :eventName="gameInfo.eventName"
    ></page-title>
    <div class="content">
      <!-- 展示倒计时时钟 -->
      <div class="content-top" :style="!show30 ? 'font-size:28rem' : ''">{{ timeout1 }}</div>
      <div class="content-bottom" v-if="show30">{{ timeout2 }}</div>
    </div>
  </div>
</template>

<script setup>
import useStore from '@/store'
import Config from '@/assets/js/config'
import { useMultiProcRequest } from '@/assets/js/useMultiProcRequest'

const { results, fetchForProcs } = useMultiProcRequest()

const gameInfo = ref({
  discipline: '马术',
  match: '',
  event: 'DRESINDV',
  // type: '实时成绩',
  eventName: '',
})

const atheleteInfo = ref({
  order: 1,
  name: '杨舒涵',
  delegation: '中国',
  horseOrder: 201,
  club: '好骑士嘉豪马术',
  horseName: 'Joanna',
  time: '00:00',
})

const process = ref([
  // { name: '立定敬礼', order: 1 }
])

let timer1 = null
let timer2 = null

const isRunning1 = ref(false)
const isRunning2 = ref(false)

const timeout1 = ref(45) // 准备时间
const timeout2 = ref(30) // 运行时间

const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()
const params = ref({})
const procName = ref([])
const commonStore = useStore.useCommonStore()
const show30 = ref(false)
const reserve30 = ref(false)
const reserve45 = ref(false)

onUnmounted(() => {
  clearInterval(timer1)
  clearInterval(timer2)
})
onMounted(async () => {
  params.value = route.query
  procName.value = Config.procNameList[route.name]
  await getData()
  const lastMsg = commonStore.receivedActionMessages?.slice(-1)[0]
  if (lastMsg && lastMsg.tplCode == 'scb-dressage-score3') {
    init(lastMsg)
  }
  startTimer1()
  startTimer2()
})

const getData = async () => {
  if (procName.value.length > 0) {
    await fetchForProcs(procName.value, {
      procName: procName.value[0],
      keyValues: params.value,
    })
  }
}

const startTimer1 = () => {
  // timeout1.value--
  timer1 = setInterval(() => {
    if (isRunning1.value && timeout1.value >= 0) {
      if (reserve45.value) {
        timeout1.value++
      } else {
        timeout1.value--
      }
    }
    if (timeout1.value == 0) {
      reserve45.value = true
    }
  }, 1000)
}

const startTimer2 = () => {
  timer2 = setInterval(() => {
    if (isRunning2.value && timeout2.value >= 0) {
      if (reserve30.value) {
        timeout2.value++
      } else {
        timeout2.value--
      }
    }
    if (timeout2.value == 0) {
      reserve30.value = true
    }
  }, 1000)
}

const init = (msg) => {
  if (msg.data?.playAction == 'pause') {
    isRunning1.value = false
    isRunning2.value = false
  } else if (msg.data?.playAction == 'resume') {
    isRunning1.value = true
    if (show30.value) {
      isRunning2.value = true
    }
  }
  if (msg.data?.code == 'start45') {
    if (msg.data?.pause == 1) {
      isRunning1.value = false
      isRunning2.value = false
    } else {
      isRunning1.value = true
    }
    // isRunning1.value = true
  } else if (msg.data?.code == 'start30') {
    show30.value = true
    isRunning2.value = true
  }
}

watchEffect(() => {
  if (results.value?.recordset?.length) {
    gameInfo.value.event = results.value.recordset[0]?.EventCode
    gameInfo.value.match = results.value.recordset[0]?.MatchName
    gameInfo.value.eventName = results.value.recordset[0]?.EventName
  }
})

watch(
  () => commonStore.receivedActionMessages,
  (newVal, oldVal) => {
    if (newVal.length > 0) {
      const latestMsg = newVal[newVal.length - 1]
      init(latestMsg)
    }
  },
  { deep: true }
)
</script>

<style scoped lang="scss">
@import '@/assets/scss/dressage/score3';
</style>
